<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="">
				<tr v-for="(stu,i) in stus">
					<td>
						{{stu.id}}
					</td>
					<td>
						{{stu.name}}
					</td>
					<td>
						{{stu.age}}
					</td>
					<td>
						<button @click="del(i)">删除</button>
					</td>
				</tr>
			</table>
			名字:<input type="text" v-model="name" /><br/>
			年龄:<input type="text" v-model="age" /><br/>
			<button @click="add">添加</button>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						name: '',
						age: '',
						stus: [
							{
								id: 1,
								name: "张三",
								age: 18
							},
							{
								id: 2,
								name: "李四",
								age: 19
							},
							{
								id: 3,
								name: "王五",
								age: 20
							},
						]
					}
				},
				methods:{
					add:function(){
						this.stus.push({
							id:this.stus.length + 1,
							name:this.name,
							age:this.age
						})
					},
					del:function(i){
						this.stus.splice(i,1)
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
